<template>
  <client-only>
    <el-select
        style="width: 100%"
        v-model="selectValue"
        multiple
        :multiple-limit="props.multipleLimit"
        filterable
        :loading="selectLoading"
        default-first-option
        :clearable="true"
        :placeholder='"请选择最多" + props.multipleLimit + "个标签"'
        no-data-text="没有数据"
        no-match-text="没有匹配的数据"
        loading-text="加载中"
        @change="selectChange"
    >
      <el-option
          v-for="item in tagList"
          :key="item.tagName"
          :label="item.tagName"
          :value="item.id">
      </el-option>
    </el-select>
  </client-only>
</template>

<script setup lang="ts">
import {Tag} from "@/entity/tag";
import {Response} from "@/entity/response";

const props = defineProps({
  select: {
    type: Array,
    default: []
  },
  multipleLimit: {
    type: Number,
    default: 10
  }
});
const emit = defineEmits(["selectChange"]);
const {tagApi} = useApi();
const selectValue = ref(props.select);
const selectLoading = ref(false);
const tagList = ref<Tag[]>([]);

onBeforeMount(() => {
  getTagList();
});

const cleanSelect = () => {
  selectValue.value = [];
};
const getTagList = () => {
  selectLoading.value = true;
  tagApi.getAll().then((res: any) => {
    const {data}: Response = res;
    tagList.value = data;
    selectLoading.value = false;
  });
};
const selectChange = (arr: any) => {
  let Tags = [] as Tag[];
  arr.forEach((item: any) => {
    let tag = {} as Tag;
    tag.id = item;
    Tags.push(tag)
  });
  emit("selectChange", Tags);
};
defineExpose({
  cleanSelect
});
</script>

<style scoped lang="scss">
</style>